<script lang="ts" setup name="know-ledge-card">
import type { Knowledge } from '@/types/consult'
import { useFollow } from '@/composable'
defineProps<{ item: Knowledge }>()
const { loading, follow } = useFollow()
</script>

<template>
  <div class="knowledge-card van-hairline--bottom">
    <div class="head">
      <van-image class="avatar" round :src="item.creatorAvatar" />
        <div class="info">
          <p class="name">{{ item.creatorName }}</p>
          <p class="dep van-ellipsis">
            {{ item.creatorHospatalName }}
            {{ item.creatorDep }}
            {{ item.creatorTitles }}
          </p>
        </div>
        <van-button class="btn" size="small" round :loading="loading" @click="follow(item)">
          {{ item.likeFlag ? '已关注' : '关注' }}
        </van-button>
    </div>
    <div class="main">
      <h3 class="title van-ellipsis">{{ item.title }}</h3>
      <p class="tag">
        <span v-for="(i, index) in item.topics" :key="index"># {{ i }}</span>
      </p>
      <p class="intro van-multi-ellipsis--l2" v-html="item.content"></p>
      <div class="imgs">
        <van-image v-for="(i, index) in item.coverUrl" :key="index" :src="i" />
      </div>
      <p class="logs">
        <span>{{ item.collectionNumber }} 收藏</span>
        <span>{{ item.commentNumber }} 评率</span>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep() {
  .intro.van-multi-ellipsis--l2 {
    img {
      width: 100%;
    }
  }
}
.knowledge-card {
  padding: 20px 0 16px;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .avatar {
      width: 38px;
      height: 38px;
      margin-right: 10px;
    }
    .info {
      width: 200px;
      padding-right: 10px;
      .name {
        color: var(--cp-text2);
      }
      .dep {
        color: var(--cp-tip);
        font-size: 12px;
      }
    }
    .btn {
      padding: 0 12px;
      border-color: var(--cp-primary);
      color: var(--cp-primary);
      height: 28px;
      width: 72px;
    }
  }
  .main {
    .title {
        font-size: 16px;
        margin-top: 8px;
        font-weight: normal;
    }
    .tag {
      margin-top: 6px;
      > span {
        color: var(--cp-primary);
        margin-right: 20px;
        font-size: 12px;
      }
    }
    .intro {
      margin-top: 7px;
      line-height: 2;
      color: var(--cp-text3);
    }
    .imgs {
      margin-top: 7px;
      display: flex;
      .van-image {
        width: 106px;
        height: 106px;
        margin-right: 12px;
        border-radius: 12px;
        overflow: hidden;
        &.large {
          .van-image {
            width: 185px;
            height: 125px;
          }
        }
      }
    }
    .logs {
      margin-top: 10px;
      > span {
        color: var(--cp-tip);
        margin-right: 16px;
        font-size: 12px;
      }
    }
  }
}
</style>